<template>
  <div class="warp">
    <div class="no">
      <a-table
        :scroll="{ y: `calc(100vh - 168px)` }"
        :rowKey="config.rowkey"
        :pagination="pagination"
        :columns="header"
        :data-source="list"
        :loading="config.loading"
        :bordered="config.isBorder"
        :row-selection="config.isSelection ? rowSelection : null"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'operation'">
            <!-- <a-tag color="#2db7f5" size="small" type="primary" danger>编辑</a-tag>
            <a-tag color="#108ee9" class="ml-1" size="small" type="primary" danger>删除</a-tag> -->
            <div class="btn">
              <div class="item" v-if="config.haveEdit" @click="edit(record)">
                <EditTwoTone />
              </div>
              <div class="item" v-if="config.haveDel" @click="del(record)">
                <DeleteTwoTone />
              </div>
            </div>
          </template>
        </template>
      </a-table>
    </div>
    <div
      class="pagination-warp"
      v-if="config.page"
      style="display: flex; justify-content: space-between"
    >
      <a-pagination
        simple
        show-size-changer
        :current="state.page.pageNum"
        :pageSize="state.page.pageSize"
        :total="config.total"
        @change="onHandleCurrentChange"
        @showSizeChange="onHandleSizeChange"
      />
      <a-button type="primary" @click="bottomBtn">{{
        config.btnName
      }}</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { EditTwoTone, DeleteTwoTone } from "@ant-design/icons-vue";
const props = defineProps({
  // 列表内容
  list: {
    type: Array,
    default: () => [],
  },
  pagination: {
    type: Boolean,
    default: false,
  },
  // 表头内容
  header: {
    type: Array,
    default: () => [],
  },
  // 配置项
  config: {
    type: Object,
    default: () => {},
  },
});

const emit = defineEmits([
  "selectCol",
  "pageChange",
  "onEdit",
  "onDel",
  "onBottomBtn",
]);

const state = reactive({
  page: {
    pageNum: 1,
    pageSize: 10,
  },
  selectlist: [],
  selectedKeys: [],
  checkedKeys: [],
});

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    state.selectlist = selectedRows;
    emit("selectCol", state.selectlist);
  },
};

const onHandleSizeChange = (current: number, size: number) => {
  state.page.pageSize = size;
  emit("pageChange", state.page);
};

const onHandleCurrentChange = (current: number, size: number) => {
  state.page.pageNum = current;
  emit("pageChange", state.page);
};

const edit = (row: any) => {
  emit("onEdit", row);
};
const del = (row: any) => {
  emit("onDel", row);
};
const bottomBtn = () => {
  emit("onBottomBtn");
};
</script>
<style scoped lang="less">
.warp {
  margin-top: 12px;

  // :deep(.ant-table-wrapper .ant-table-tbody>tr>td) {
  //   padding: 16px 14px !important;
  // }

  // :deep(.ant-table-tbody .ant-table-measure-row) {
  //   padding: 0 !important;
  // }
}

.btn {
  display: flex;
  justify-content: space-between;

  .item {
    flex: 1;
    display: flex;
    justify-content: center;
  }
}

.no {
  height: calc(100vh - 110px);
}

.pagination-warp {
  margin-top: 20px;

  :deep(
      .ant-pagination.ant-pagination-simple
        .ant-pagination-next
        .ant-pagination-item-link
    ) {
    height: 32px !important;
  }

  :deep(
      .ant-pagination.ant-pagination-simple
        .ant-pagination-prev
        .ant-pagination-item-link
    ) {
    height: 32px !important;
  }

  :deep(.ant-pagination) {
    line-height: 32px !important;
  }
}
</style>
